<template>
    <view class="container">
        <view class="example">
            <u-form :model="user" ref="uForm" :rules="rules" labelWidth="auto">
                <u-form-item label="用户昵称" prop="nickName">
                    <u-input v-model="user.nickName" placeholder="请输入昵称" />
                </u-form-item>
                <u-form-item label="手机号码" prop="phonenumber">
                    <u-input v-model="user.phonenumber" :maxlength="11" placeholder="请输入手机号码" />
                </u-form-item>
                <u-form-item label="安装地址" prop="address">
                    <u-input v-model="user.address" placeholder="请输入安装地址" />
                </u-form-item>
            </u-form>
            <view style="margin-top: 40px;"><u-button type="primary" @click="submit">提交</u-button></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            user: {
                nickName: "",
                phonenumber: "",
                address: ""
            },
            rules: {
                nickName: [{
                    required: true,
                    message: '用户昵称不能为空',
                    trigger: ['blur', 'change']
                }],
                phonenumber: [{
                    required: true,
                    message: '手机号码不能为空',
                    trigger: ['blur', 'change']
                }, {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入正确的手机号码',
                    trigger: ['blur', 'change']
                }],
                address: [{
                    required: true,
                    message: '安装地址不能为空',
                    trigger: ['blur', 'change']
                }]
            }
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules)
    },
    methods: {
        submit() {
            this.$refs.uForm.validate().then(valid => {
                if (!valid) return;
                this.$utils.showLoading('提交中...')
                this.$services.homeService
                    .applyToInstall({
                        buildingId: '',
                        realName: this.user.nickName,
                        mobile: this.user.phonenumber,
                        address: this.user.address
                    })
                    .then(res => {
                        this.$utils.hideLoading()
                        this.$utils.showMessage('提交成功')
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    }).catch(err => {
                        this.$utils.hideLoading()
                    })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #ffffff;
}

.example {
    padding: 30rpx;
    background-color: #fff;
}

.u-button {
    margin-top: 40rpx;
}
</style>